// src/composables/useTransformer.ts
import { watch } from 'vue';
import { useTemplateStore } from '@/stores/templateStore';
import type { Ref } from 'vue';

export function useTransformer(stageRef: Ref<any>, transformerRef: Ref<any>) {
    const store = useTemplateStore();

    watch(() => store.selectedElementId, (newId) => {
        const stage = stageRef.value?.getStage();
        const transformer = transformerRef.value?.getStage();
        if (!stage || !transformer) return;

        if (!newId) {
            transformer.nodes([]);
            return;
        }

        // Konva 的 find 方法可能需要一点时间来找到新添加的节点，
        // 使用 nextTick 或者 ചെറിയ延时可能更稳定，但目前直接查找在多数情况下可行
        const selectedNode = stage.findOne('#' + newId);

        if (selectedNode) {
            transformer.nodes([selectedNode]);
        } else {
            transformer.nodes([]);
        }
    }, { deep: true });
}